<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div{
            padding-top: 20px;

        }
        table{
            width: 100%;
            /* height: 100%; */
             border: 1px solid #000;
            border-collapse: collapse;
            empty-cells: show;
         }
         tr{
             text-align: center;
         }
         td{
            border: 1px solid #000;
         }
     </style>
</head>

<body>
    <input type="text" placeholder="输入行数" id="row">
    <input type="text" placeholder="输入列数" id="col">
    <input type="button" value="生成表格" id="btn">
    <div id="box" >
        <!-- <table>
            <tr>
                <td>

                </td>
            </tr>
        </table> -->
    </div>
</body>

<script>
    var btn = document.getElementById('btn');
    var box = document.getElementById('box');
    btn.onclick = function () {
        var row = document.getElementById('row').value * 1;
        var col = document.getElementById('col').value * 1;
        var str = '<table>';
        for (var i = 0; i < row; i++) {
            if(i % 2 == 0){
                str += '<tr style="background: pink;">';
            }else{
                str += '<tr style="background: #ccc;">';
            }
            str += '<td>第' + (i + 1) + '行</td>';
            for (var j = 0; j < col; j++) {
                str += '<td>第' + (i + 1) + '行第' + (j + 1) + '列</td>';
            }
            str += '<td>' + '<a href="">删除</a>' + '</td>';
            str += '</tr>';
        }
        str += '</table>';
        box.innerHTML = str;
    }
</script>

</html>